<link href="/static/plugs/city-picker/city-picker.css" rel="stylesheet" />
{block name='content'}
<form class="layui-form layui-card" lay-filter="lay_form" action="{:request()->url()}" data-auto="true" method="post" autocomplete="off">
    <div class="layui-card-body padding-40">
        <div class="layui-form-item layui-row layui-col-space15">
            <label class="layui-col-xs6 block relative">
                <span class="color-green label-required-prev">柜点名称</span><span class="margin-left-5 color-desc">Store Name</span>
                <input class="layui-input" name="name" required value="{$vo.name|default=''}" placeholder="请输入柜点名称">
            </label>
<!--            <div class="layui-col-xs6 block relative">-->
<!--                <span class="color-green label-required-prev">柜点类型</span><span class="margin-left-5 color-desc">Store Type</span>-->
<!--                <select class="layui-select" lay-search name="store_type">-->
<!--                    <option value="">请选择 柜点类型</option>-->
<!--                    {foreach name="$store_types" id="type"}-->
<!--                    {if isset($vo.store_type) AND $vo.store_type eq $key}-->
<!--                    <option selected value="{$key}">{$type}</option>-->
<!--                    {else}-->
<!--                    <option value="{$key}">{$type}</option>-->
<!--                    {/if}-->
<!--                    {/foreach}-->
<!--                </select>-->
<!--            </div>-->
            <label class="layui-col-xs6 block relative">
                <span class="color-green font-w7 label-required-prev">柜点图片</span>
                <span class="color-desc margin-left-5">Store Image</span>
                <label class="relative block label-required-null">
                    <input required name="store_img" value='{$vo.store_img|default=""}' placeholder="请上传设备图片&nbsp;&nbsp;&nbsp;&nbsp;" class="layui-input">
                    <a data-file data-type="png,jpg,gif" data-field="store_img" class="input-right-icon layui-icon layui-icon-upload"></a>
                    <script>$('[name="store_img"]').uploadOneImage()</script>
                </label>
            </label>
        </div>

        <div class="layui-form-item layui-row layui-col-space15">
            <div class="layui-col-xs6 block relative">
                <span class="color-green label-required-prev">省、市、区</span><span class="margin-left-5 color-desc">Store Area</span>
                <input type="text" autocomplete="on" class="layui-input" id="city-picker" name="area" readonly="readonly" data-toggle="city-picker" placeholder="请选择 省、市、区">
            </div>
            <label class="layui-col-xs6 block relative">
                <span class="color-green label-required-prev">详细地址</span><span class="margin-left-5 color-desc">Store Address</span>
                <input class="layui-input" name="address" required value="{$vo.name|default=''}" placeholder="请输入详细地址">
            </label>
        </div>

        <div class="layui-form-item layui-row layui-col-space15">
<!--            <div class="layui-col-xs6 block relative">-->
<!--                <span class="color-green label-required-prev">坐标拾取</span><span class="margin-left-5 color-desc">Get Point</span>-->
<!--                <input class="layui-input" name="points" required value="{$vo.points|default=''}" placeholder="请输入地址坐标">-->
<!--                <button type="button" class="layui-btn layui-btn-sm" data-iframe="https://lbs.qq.com/tool/getpoint/getpoint.html" data-width="950px" >打开拾取页面</button>-->
<!--                <style>-->

<!--                </style>-->
<!--            </div>-->
<!--            <label class="layui-col-xs6 block relative">-->
<!--                <span class="color-green font-w7 label-required-prev">柜点图片</span>-->
<!--                <span class="color-desc margin-left-5">Store Image</span>-->
<!--                <label class="relative block label-required-null">-->
<!--                    <input required name="store_img" value='{$vo.store_img|default=""}' placeholder="请上传设备图片&nbsp;&nbsp;&nbsp;&nbsp;" class="layui-input">-->
<!--                    <a data-file data-type="png,jpg,gif" data-field="store_img" class="input-right-icon layui-icon layui-icon-upload"></a>-->
<!--                    <script>$('[name="store_img"]').uploadOneImage()</script>-->
<!--                </label>-->
<!--            </label>-->
<!--            <div class="layui-col-xs6 block relative">-->
<!--                <span class="color-green label-required-prev">合作类型</span><span class="margin-left-5 color-desc">Cooperation Type</span>-->
<!--                <select class="layui-select" lay-search name="cooperation_type">-->
<!--                    <option selected value="">请选择 合作类型</option>-->
<!--                    {foreach name="$coo_types" id="type"}-->
<!--                    {if isset($vo.cooperation_type) AND $vo.cooperation_type eq $key}-->
<!--                    <option selected value="{$key}">{$type}</option>-->
<!--                    {else}-->
<!--                    <option value="{$key}">{$type}</option>-->
<!--                    {/if}-->
<!--                    {/foreach}-->
<!--                </select>-->
<!--            </div>-->
        </div>

        <div class="layui-form-item layui-row layui-col-space15">
            <label class="layui-col-xs6 block relative">
                <span class="color-green label-required-prev">联系人姓名</span><span class="margin-left-5 color-desc">Contact Name</span>
                <input class="layui-input" name="contacts" required value="{$vo.contacts|default=''}" placeholder="请输入联系人姓名">
            </label>
            <label class="layui-col-xs6 block relative">
                <span class="color-green label-required-prev">联系人电话</span><span class="margin-left-5 color-desc">Contact Number</span>
                <input class="layui-input" name="contact_number" lay-verify="required" required value="{$vo.contact_number|default=''}" placeholder="请输入联系人电话">
            </label>
        </div>

        <div class="layui-form-item layui-row layui-col-space15">
            <label class="layui-col-xs6 block relative">
                <span class="color-green label-required-prev">营业类型</span><span class="margin-left-5 color-desc">Business Hours</span><br>
                <select class="layui-select" lay-filter="bus_hours" lay-search name="bus_hours">
                    <option value="">请选择 营业类型</option>
                    {assign name="bus_hours" value="$vo.bus_hours|default=0"}
                    {foreach ['时段', '全天'] as $key=>$type}
                    {if $bus_hours eq $key}
                    <option selected value="{$key}">{$type}</option>
                    {else}
                    <option value="{$key}">{$type}</option>
                    {/if}
                    {/foreach}
                </select>
            </label>

            <label class="layui-col-xs3 relative times" {if $bus_hours==1}style="display: none"{/if}>
                <span class="color-green label-required-prev">开始时间</span><span class="margin-left-5 color-desc">Start Hours</span>
                <input class="layui-input" id="start" name="start_hours" required value="{$vo.start_hours|default='00:00:00'}" placeholder="请输入营业开始时间">
            </label>
            <label class="layui-col-xs3 relative times" {if $bus_hours==1}style="display: none"{/if}>
                <span class="color-green label-required-prev">结束时间</span><span class="margin-left-5 color-desc">End Hours</span>
                <input class="layui-input" id="end" name="end_hours" required value="{$vo.end_hours|default='23:59:59'}" placeholder="请输入营业开始时间">
            </label>
        </div>

        <div class="layui-form-item layui-row layui-col-space15">
            <label class="layui-col-xs6 block relative">
                <span class="color-green">选择业务员</span><span class="margin-left-5 color-desc">Salesman</span><br>
                <select class="layui-select" lay-filter="sales_id" lay-search name="sales_id">
                    <option value="">请选择 业务员</option>
                    {assign name="sales_id" value="$vo.sales_id|default=0"}
                    {foreach $salesman as $key=>$type}
                    {if $sales_id eq $key}
                    <option selected value="{$key}">{$type}</option>
                    {else}
                    <option value="{$key}">{$type}</option>
                    {/if}
                    {/foreach}
                </select>
            </label>

            <label class="layui-col-xs6">
                <span class="color-green label-required-prev">网络类型</span><span class="margin-left-5 color-desc">Line Type</span><br>
                <div class="layui-input-inline">
                    {assign  name="line_type" value="$vo.line_type|default=1"}
                    <input type="radio" lay-filter="line_type" name="line_type" value="1" title="无线" {if $line_type==1}checked=""{/if}>
                    <input type="radio" lay-filter="line_type" name="line_type" value="2" title="有线" {if $line_type==2}checked=""{/if}>
                </div>
            </label>
        </div>

        <div class="layui-form-item layui-row layui-col-space15">
            <label class="layui-col-xs6">
                <span class="color-green">客户公众号APPID</span><span class="margin-left-5 color-desc">Customer APPID</span>
                <input class="layui-input" name="appid" value="{$vo.appid|default=''}" placeholder="请输入客户公众号APPID">
            </label>

            <label class="layui-col-xs6">
                <span class="color-green label-required-prev">是否需要会员</span><span class="margin-left-5 color-desc">Show Vip</span><br>
                <div class="layui-input-inline">
                    {assign  name="show_vip" value="$vo.show_vip|default=0"}
                    <input type="radio" lay-filter="show_vip" name="show_vip" value="1" title="需要" {if $show_vip==1}checked=""{/if}>
                    <input type="radio" lay-filter="show_vip" name="show_vip" value="0" title="不需要" {if $show_vip!=1}checked=""{/if}>
                </div>
            </label>
        </div>

        <div class="layui-form-item layui-row layui-col-space15">
            <label class="layui-col-xs12">
                <span class="color-green">备注信息</span><span class="margin-left-5 color-desc">Remarks</span>
                <input class="layui-input" name="remark" value="{$vo.remark|default=''}" placeholder="请输入备注信息">
            </label>
        </div>

        <div class="hr-line-dashed"></div>
        {notempty name='vo.id'}<input type='hidden' value='{$vo.id}' name='id'>{/notempty}

        <div class="layui-form-item text-center">
            {if $title!="查看柜点"}
            <button class="layui-btn" lay-submit lay-filter="submit">保存数据</button>
            <button class="layui-btn layui-btn-danger" type='button' data-close="">取消编辑</button>
            {/if}
        </div>

    </div>

</form>
{/block}

{block name="style"}
<!--<style>-->
<!--    .layui-laydate-content>.layui-laydate-list {-->
<!--        padding-bottom: 0px;-->
<!--        overflow: hidden;-->
<!--    }-->
<!--    .layui-laydate-content>.layui-laydate-list>li{-->
<!--        width:50%-->
<!--    }-->

<!--    .merge-box .scrollbox .merge-list {-->
<!--        padding-bottom: 5px;-->
<!--    }-->
<!--</style>-->
{/block}


{block name='script'}
<script src="/static/plugs/city-picker/city-picker.data.js"></script>
<script>
    (function () {
        var title = "{$title}";
        if(title=='查看柜点'){
            $("input,select,:checkbox").attr("readOnly", true);
        }

        if(layui.citypicker==undefined){
            layui.extend({
                citypicker: '{/}/static/plugs/city-picker/city-picker'
            }).use(['citypicker'], function () {
               var cityPicker = layui.citypicker;
               var currentPicker = new cityPicker("#city-picker", {
                   provincename:"provinceId",
                   cityname:"cityId",
                   districtname: "districtId",
                   level: 'districtId',// 级别
               });
               currentPicker.setValue('{$vo.area|default=""}');
           })
        }else{
            var cityPicker = layui.citypicker;
            var currentPicker = new cityPicker("#city-picker", {
                provincename:"provinceId",
                cityname:"cityId",
                districtname: "districtId",
                level: 'districtId',// 级别
            });
            currentPicker.setValue('{$vo.area|default=""}');
        }

        laydate.render({
            elem: '#start'
            ,trigger: 'click'
            ,type: 'time',
            // format:"HH:mm",
            done: function(value){
                let form_data = layui.form.val("lay_form");
                if(form_data.bus_hours<1){
                    if($("#end").val() && value>$("#end").val()){
                        layer.msg("营业结束时间需小于营业开始时间");
                        $("#start").val("");
                    }
                }
            }
        });

        laydate.render({
            elem: '#end'
            ,trigger: 'click'
            ,type: 'time',
            // format:"HH:mm",
            done: function(value){
                let form_data = layui.form.val("lay_form");
                if(form_data.bus_hours<1){
                    if($("#start").val() && value<$("#start").val()){
                        layer.msg("营业结束时间需大于营业开始时间")
                        $("#end").val("");
                    }
                }
            }
        });

        form.on('select(bus_hours)', function(data){
            if(data.value==1){
                $(".times").hide();
            }else{
                $(".times").show();
            }
        });

        layui.form.on('radio', radios);

        layui.form.render();

        layui.form.on('submit', function (data) {
            if(data.field.bus_hours<1){
                if($("#start").val() > $("#end").val()){
                    layer.msg("营业结束时间需小于营业开始时间");
                    $("#start").val("");
                    layui.form.render();
                    return false;
                }
            }
        });

        function radios(data) {
            let key = $(this).prop('name');
            if(key=='bus_hours' && data.value==1){
                $(".times").hide();
            }else if(key=='bus_hours' && data.value<1){
                $(".times").show();
            }
            $("input[name="+key+"]").val(data.value);
        }

    })();
</script>
{/block}